<template>
	<view class="weui-tabbar" >
		<view @click="tabChange(index,item.url)" v-for="(item, index) in list" :key="index" class="weui-tabbar__item"
			:class="{'weui-bar__item_on':index === current}">
			<view style="position: relative;display:inline-block; align-content: center;">
				<image :src="current === index ? item.selectedIconPath : item.iconPath"
					:class="item.text=='main'? 'weui-tabbar__icon_main' : 'weui-tabbar__icon'">
				</image>
			</view>
			<view v-if="item.text!='main'" class="weui-tabbar__label">{{ item.text }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['indexNum'],
		data() {
			return {
				current: this.indexNum,
				list: [{
						"text": "任务",
						"iconPath": '/static/tab-bar/renwu-no.png',
						"selectedIconPath": '/static/tab-bar/renwu.png',
						"url": '/pages/my-job/boss-my-job-new'
					},
					{
						"text": "main",
						"iconPath": '/static/tab-bar/fabu.png',
						"selectedIconPath": '/static/tab-bar/fabu.png',
						"url": '/pages/index/index'
					},
					{
						"text": "我的",
						"iconPath": '/static/tab-bar/me-no.png',
						"selectedIconPath": '/static/tab-bar/me.png',
						"url": '/pages/my/newMy'
					}
				],
			};
		},
		methods: {
			tabChange(index, url) {
				if (index === this.current) {
					return;
				}
				uni.reLaunch({
					url: url,
					//animationType: 'none',
					animationType: 'fade-in',
					//animationType: 'zoom-fade-out',
					animationDuration: 100
				})
				this.current = index;
			}
		},
	};
</script>

<style lang="scss" scoped>
	//#ifndef MP-TOUTIAO
	.weui-tabbar {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 500;
		background-color: #ffffff;
		height: 166rpx;
		padding-top: 20rpx;
	}
   //#endif
   //#ifdef MP-TOUTIAO
   	.weui-tabbar {
   		display: flex;
   		position: relative;
   		z-index: 500;
   		background-color: #ffffff;
   		height: 108rpx;
   	}
   //#endif
	.weui-tabbar:before {
		content: ' ';
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
		color: rgba(0, 0, 0, 0.1);
	}

	.weui-tabbar__item {
		display: flex;
		flex-direction: column;
		flex: 1;
		padding: 8rpx 0 4rpx;
		padding-bottom: calc(8rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(8rpx + env(safe-area-inset-bottom));
		// padding-top:10rpx;
		font-size: 0;
		color: rgba(0, 0, 0, 0.5);
		text-align: center;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	.weui-tabbar__item:first-child {
		transform: translateY(18rpx);
		padding-left: constant(safe-area-inset-left);
		padding-left: env(safe-area-inset-left);
	}

	.weui-tabbar__item:last-child {
		transform: translateY(18rpx);
		padding-right: constant(safe-area-inset-right);
		padding-right: env(safe-area-inset-right);
	}

	// .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon,
	// .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon>i,
	// .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
	// 	color: #57524E;
	// }

	.weui-tabbar__icon {
		display: inline-block;
		width: 34rpx;
		height: 38rpx;
		margin-bottom: 2rpx;
	}

	.weui-tabbar__icon_main {
		display: inline-block;
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 2rpx;
	}

	i.weui-tabbar__icon,
	.weui-tabbar__icon>i {
		font-size: 22rpx;
		color: rgba(0, 0, 0, 0.5);
	}

	.weui-tabbar__icon image {
		width: 100%;
		height: 100%;
	}

	.weui-tabbar__label {
		color: #57524E;
		font-size: 22rpx;
		line-height: 1.4;
	}
</style>
